// RightDrawer.qml —— 右侧抽屉组件
// 功能：提供一个可滑出的右侧抽屉区域，用于放置设置面板、信息栏等内容

import QtQuick
import QtQuick.Layouts
import QtQuick.Effects

Item {
    id: root

    // === 公共接口属性（可在外部修改） ===
    property bool backgroundVisible: true          // 是否显示背景矩形
    property color drawerColor: theme.secondaryColor // 抽屉背景颜色
    property real radius: 24                       // 抽屉圆角半径
    property real columnspacing: 12                // 内容项之间的间距
    property int padding: 15                       // 内边距

    // === 阴影属性 ===
    property bool shadowEnabled: true              // 是否启用阴影
    property color shadowColor: theme.shadowColor  // 阴影颜色

    // === 抽屉状态属性 ===
    property bool opened: false                    // 抽屉是否打开（true：打开，false：关闭）

    // === 默认尺寸 ===
    width: 200                                     // 抽屉宽度
    height: parent ? parent.height : 600           // 默认高度为父项高度，否则为600

    // === 默认插槽：用户可以在外部直接放内容进来 ===
    default property alias content: contentLayout.data

    // === 对外方法（供外部调用） ===
    function open()   { root.opened = true }       // 打开抽屉
    function close()  { root.opened = false }      // 关闭抽屉
    function toggle() { root.opened = !root.opened } // 切换抽屉状态（开 ↔ 关）

    // === 抽屉主体 ===
    Item {
        id: drawerContent
        width: root.width
        height: root.height
        y: 0

        // === 阴影效果 ===
        MultiEffect {
            source: background                     // 阴影基于背景绘制
            anchors.fill: background
            visible: root.shadowEnabled && root.backgroundVisible // 有背景时才显示阴影
            shadowEnabled: true
            shadowColor: root.shadowColor
            shadowBlur: theme.shadowBlur
            shadowVerticalOffset: theme.shadowYOffset
            shadowHorizontalOffset: theme.shadowXOffset
        }

        // === 背景矩形 ===
        Rectangle {
            id: background
            anchors.fill: parent
            visible: root.backgroundVisible        // 可根据需要隐藏
            radius: root.radius                    // 圆角
            color: root.drawerColor                // 背景颜色
        }

        // === 内容区域布局 ===
        Column {
            id: contentLayout
            anchors.fill: parent
            spacing: columnspacing                 // 子项间距
            anchors.margins: root.padding          // 内边距
        }

        // === 动画状态控制 ===
        states: [
            // 关闭状态
            State {
                name: "closed"
                when: !root.opened
                PropertyChanges {
                    target: drawerContent
                    x: parent.width                // 抽屉完全移出屏幕
                }
            },
            // 打开状态
            State {
                name: "opened"
                when: root.opened
                PropertyChanges {
                    target: drawerContent
                    x: parent.width - drawerContent.width // 抽屉滑出显示
                }
            }
        ]

        // === 动画过渡效果 ===
        transitions: [
            Transition {
                NumberAnimation {
                    properties: "x"
                    duration: 500                  // 动画时长 0.5 秒
                    easing.type: Easing.OutCubic   // 缓出曲线，滑动更自然
                }
            }
        ]
    }
}
